<!--  -->
<template>
  <div>
    <el-table :data="item" border stripe>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column label="商品主图" align="center">
         <template slot-scope="scope">
            <el-image
              :src="scope.row.url"
              style="width: 50px; height: 50px"
            ></el-image>
          </template>
      </el-table-column>
      <el-table-column prop="price" label="商品单价"></el-table-column>
      <el-table-column prop="num" label="购买数量"></el-table-column>
      <el-table-column prop="total" label="小计"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { searchGoodDetailById } from "@/api/orders";
import { Message } from "element-ui";
export default {
  name: "",
  props: {
    id: Number,
  },
  data() {
    return {
      item: [],
    };
  },
  components: {},
  computed: {},
  created(){
    this.getData()
  },
  beforeMount() {},
  mounted() {},
  methods: {
    getData() {
      searchGoodDetailById(this.id).then((res) => {
        res.code === 20000
          ? (this.item .push(res.data) )
          : Message.error("加载数据出错" + message);
      });
    },
  },
  watch: {
    id(newval) {
      this.getData();
    },
  },
};
</script>

<style lang='' scoped>
</style>